<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="800px" append-to-body>
        <el-form ref="form" :model="model" :rules="rules" inline label-width="110px" label-suffix=":" class="expert-class" v-loading="loading">
            <el-form-item label="handle" prop="expert_id">
                <el-select v-model="model.expert_id" placeholder="请选择" filterable clearable>
                    <el-option v-for="(item, index) in expertList" :key="index" :label="item.expert_name" :value="item.expert_id"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="视频地址" prop="publish_url">
                <el-input v-model.trim="model.publish_url" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="广告名称" prop="adv_name">
                <el-input v-model.trim="model.adv_name" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="广告系列" prop="ads_name">
                <el-input v-model.trim="model.ads_name" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="sku" prop="sku">
                <el-input v-model.trim="model.sku" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="投放平台" prop="adv_platform_id">
                <el-select v-model="model.adv_platform_id" placeholder="请选择" clearable>
                    <el-option v-for="item in PUBLISH_PLATFORM" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="投放状态" prop="publish_status">
                <el-select v-model="model.publish_status" placeholder="请选择" clearable>
                    <el-option v-for="item in PUBLISH_STATUS" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="投放人" prop="fb_admin_id">
                <SelectPage
                    v-model="model.fb_admin_id"
                    placeholder="请选择建联人"
                    :url="$api.purchase.getPurchaserList"
                    show_field="username"
                    show_id="operater_id"
                    query_field="keyword"
                    filterable
                    clearable
                    popper-class="custom-select"
                ></SelectPage>
            </el-form-item>
            <el-form-item label="广告花费" prop="spend">
                <el-input v-model.trim="model.spend" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="订单数" prop="order_nums">
                <el-input v-model.trim="model.order_nums" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="收入" prop="income">
                <el-input v-model.trim="model.income" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="CPM" prop="cpm">
                <el-input v-model.trim="model.cpm" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="CPC" prop="cpc">
                <el-input v-model.trim="model.cpc" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="ROI" prop="roi">
                <el-input v-model.trim="model.roi" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="CTR" prop="ctr">
                <el-input v-model.trim="model.ctr" placeholder="请输入" clearable size="small" />
            </el-form-item>
            <el-form-item label="投放开始时间" prop="start_time">
                <el-date-picker v-model="model.start_time" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择日期" clearable> </el-date-picker>
            </el-form-item>
            <el-form-item label="投放结束时间" prop="end_time">
                <el-date-picker v-model="model.end_time" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="请选择日期" clearable> </el-date-picker>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" :loading="save" :disabled="save" @click="submit">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { editAdv, addAdv, getExpert } from '@/api/expert'
import { PUBLISH_STATUS, PUBLISH_PLATFORM } from '../../constant'
export default {
    name: 'DetailDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        return {
            loading: false,
            save: false,
            model: {
                id: '',
                expert_id: undefined,
                publish_url: undefined,
                adv_name: undefined,
                ads_name: undefined,
                sku: undefined,
                adv_platform_id: undefined,
                publish_status: undefined,
                fb_admin_id: undefined,
                spend: undefined,
                order_nums: undefined,
                income: undefined,
                cpm: undefined,
                cpc: undefined,
                roi: undefined,
                ctr: undefined,
                start_time: undefined,
                end_time: undefined,
            },
            rules: {
                expert_id: [{ required: true, message: 'handle不能为空', trigger: ['blur', 'change'] }],
            },
            PUBLISH_STATUS,
            PUBLISH_PLATFORM,
            expertList: [],
        }
    },
    computed: {
        isEdit() {
            return !!this.model.id
        },
        title() {
            return `${this.isEdit ? '编辑' : '新增'}素材广告`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {
        params: {
            handler(val) {
                if (val.id) {
                    this.model = Object.assign({}, this.model, val)
                    this.model.ID = val.id
                }
            },
            immediate: true,
            deep: true,
        },
    },
    async created() {
        try {
            const [expertData] = await Promise.all([getExpert()])
            this.expertList = expertData?.data ?? []
        } catch (error) {
            console.log(error)
        }
    },
    methods: {
        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) {
                    return
                }

                const params = { ...this.model }
                if (this.save) {
                    return
                }
                this.save = true
                if (this.isEdit) {
                    editAdv(params)
                        .then(res => {
                            this.$message.success(res.msg)
                            this.dialogVisible = false
                            this.$emit('success')
                        })
                        .finally(() => {
                            this.save = false
                        })
                } else {
                    addAdv(params)
                        .then(res => {
                            this.$message.success(res.msg)
                            this.dialogVisible = false
                            this.$emit('success')
                        })
                        .finally(() => {
                            this.save = false
                        })
                }
            })
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>

<style>
.expert-class.el-form .el-form-item {
    width: 50%;
    margin-right: 0;
}
.expert-class.el-form .el-form-item .el-input {
    width: 240px;
}
.expert-class.el-form .el-form-item .el-textarea {
    width: 590px;
}
</style>
